<template>
    <div class="background flex jc-center">
        <div class="wrapper relative">
            <loading :load="load"></loading>
            <div class="bgBox">
                <img src="../../assets/20190808_IMG_2392.jpg" alt="banner" class="banner">
            </div>
            <div class="main flex fd-column">
                <div class="header flex">
                    <div class="profile" :style="{
                        backgroundImage: `url(${data.poster.profile.url})`,
                        backgroundSize: data.poster.profile.scale * 2 + 'px',
                        backgroundPosition: `${data.poster.profile.pos.x * 2}px ${data.poster.profile.pos.y * 2}px`,
                    }"></div>
                    <div class="name">
                        <p>{{data.poster.username}}</p>
                    </div>
                </div>
                <div class="back flex ai-center" @click="$router.push(`/blog/${uid}`)">
                    <i class="iconfont icon-angle-left"></i>
                    <span>返回主页</span>
                </div>
                <div class="content f1">
                    <div class="time">{{data.time.slice(0, 10)}}</div>
                    <p class="title">{{data.title}}</p>
                    <div class="text" v-html="data.content"></div>
                    <div class="more flex">
                        <div class="like" :class="{'done': likeStatus[aid][aid]}" @click="pressArticleLike">
                            <i class="iconfont icon-thumbs-up"></i>
                            <span >{{data.like}}</span>
                        </div>
<!--                        <div class="share">-->
<!--                            <i class="iconfont icon-share-square"></i>-->
<!--                            <span>{{data.share}}</span>-->
<!--                        </div>-->
                    </div>
                    <div class="comment">
                        <p class="explain">评论 {{data.comment.length}}</p>
                        <ul @click="pressCommentLike">
                            <li class="item flex" v-for="(item, i) in data.comment" :key="item._id">
                                <div class="profile"></div>
                                <div>
                                    <p class="userInfo">
                                        <span class="name">{{item.poster}}</span>
                                        <span class="time">{{item.time.slice(0, 10)}}</span>
                                    </p>
                                    <p class="text" v-html="item.content"></p>
                                    <div class="like relative" :class="{'done': likeStatus[aid][item._id]}">
                                        <i class="iconfont icon-thumbs-up"></i>
                                        <span>{{item.like}}</span>
                                        <div class="clickTarget" :data-id="item._id" :data-index="i"></div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="post">
                        <p class="explain">发送评论</p>
                        <label>
                            姓名
                            <input type="text" v-model="comment.name">
                        </label>
                        <label>
                            正文
                            <textarea v-model="comment.content"></textarea>
                        </label>
                        <a class="submit" @click="postComment">
                            发送
                            <span class="bottom"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "blogsArticle",
        props: ['uid', 'aid'],
        data() {
            return {
                data: {
                    poster: {
                        username: '',
                        profile: {
                            pos: {
                                x: 0,
                                y: 0,
                            },
                            scale: '0',
                            url: ''
                        },
                    },
                    time: '',
                    like: 0,
                    share: 0,
                    comment: [],
                },

                likeStatus: {},
                shareStatus: {},

                load: false,

                comment: {
                    name: '',
                    content: '',
                }
            }
        },
        methods: {
            async fetch() {
                let res = await this.$http.get(`/blog/article/${this.aid}`);
                this.data = res.data;
            },
            async postComment() {
                this.load = true;
                let pre = this.comment.content.replaceAll('\n', '<br/>');
                await this.$http.post('/blog/postComment', {
                    aid: this.aid,
                    post: {
                        name: this.comment.name,
                        content: pre,
                    }
                })
                this.comment = {};
                this.load = false;
                this.$emit('alert', '发送成功')
                await this.fetch();
            },
            async pressArticleLike() {
                let status = false;
                if (this.likeStatus[this.aid][this.aid] !== undefined) {
                    status = this.likeStatus[this.aid][this.aid];
                }
                await this.$http.post('/blog/likePost', {id: this.aid, status: status});
                this.likeStatus[this.aid][this.aid] = !status;
                localStorage.likeStatus = JSON.stringify(this.likeStatus);

                this.data.like += status ? -1 : 1;
            },
            async pressCommentLike(e) {
                if (e.target.className === 'clickTarget') {
                    let status = false;
                    if (this.likeStatus[this.aid][e.target.dataset.id] !== undefined) {
                        status = this.likeStatus[this.aid][e.target.dataset.id];
                    }
                    await this.$http.post('/blog/likeComment', {id: e.target.dataset.id, status: status});
                    this.likeStatus[this.aid][e.target.dataset.id] = !status;
                    localStorage.likeStatus = JSON.stringify(this.likeStatus);
                    this.data.comment[e.target.dataset.index].like += status ? -1 : 1;
                }
            },
        },
        created() {
            this.fetch();
            this.likeStatus = JSON.parse(localStorage.getItem('likeStatus')) || {};
            if (!this.likeStatus[this.aid]) {
                this.likeStatus[this.aid] = {};
            }
        },
    }
</script>

<style scoped lang="scss">
    .background {
        min-height: 100vh;
        box-sizing: border-box;
        overflow: hidden;
        font-size: 16px;
    }

    .wrapper {
        width: 1200px;
        min-width: 700px;
        height: 100vh;

        .bgBox {
            height: 300px;
            overflow: hidden;
            user-select: none;

            .banner {
                width: 100%;
                opacity: .8;
            }
        }

        .main {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            overflow-y: auto;

            &::-webkit-scrollbar {
                width: 6px;
                background-color: #F5F5F5;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                background-color: #555;
                cursor: pointer;
            }

            &::-webkit-scrollbar-track {
                border-radius: 10px;
            }

            .header {
                position: absolute;
                top: 200px;
                left: 0;
                padding-left: 30px;

                .profile {
                    width: 100px;
                    height: 100px;
                    margin-right: 15px;
                    background-color: #999999;
                }

                .name {
                    display: flex;
                    align-items: center;

                    p {
                        position: relative;
                        bottom: 20px;
                        font-size: 24px;
                        font-weight: 500;
                        color: white;
                        text-shadow: 2px 2px 5px #999;
                    }
                }
            }

            .back {
                position: absolute;
                top: 30px;
                left: 30px;
                color: white;
                cursor: pointer;
                user-select: none;
                transition: all .3s;

                &:hover {
                    left: 35px
                }

                .iconfont,
                span {
                    font-size: 20px;
                    line-height: 20px;
                }

                .iconfont {
                    margin-right: 5px;
                }
            }

            .content {
                margin-top: 250px;
                padding: 100px 100px 50px 100px;
                box-sizing: border-box;
                background-color: white;

                .time {
                    margin-bottom: 5px;
                    font-size: 15px;
                    color: #999;
                }

                .title {
                    margin-bottom: 16px;
                    font-size: 30px;
                    line-height: 30px;
                }

                .text {
                    margin-bottom: 20px;
                    font-size: 18px;
                    line-height: 36px;
                    font-family: Helvetica, sans-serif;
                }

                .more {
                    margin-bottom: 100px;
                    padding-left: 2px;

                    div {
                        margin-right: 30px;
                        user-select: none;
                        cursor: pointer;

                        &.done {
                            color: #DD4A68;
                        }

                        &:hover {
                            color: #99a9bf;
                        }

                        span,
                        .iconfont {
                            font-size: 18px;
                        }

                        .iconfont {
                            margin-right: 5px;
                        }
                    }
                }

                .comment,
                .post {
                    .explain {
                        font-size: 20px;
                        line-height: 20px;
                        margin-bottom: 20px;
                    }
                }

                .comment {
                    margin-bottom: 60px;

                    .item {
                        margin-bottom: 10px;
                        padding: 10px 0;

                        &:last-child {
                            margin-bottom: 0;
                        }

                        .profile {
                            margin-right: 14px;
                            width: 50px;
                            height: 50px;
                            flex-shrink: 0;
                            background-color: #999;
                        }

                        .userInfo {
                            margin-bottom: 4px;

                            .name {
                                margin-right: 8px;
                                font-size: 18px;
                            }
                        }

                        .text {
                            margin-bottom: 8px;
                            font-size: 16px;
                            line-height: 24px;
                        }

                        .like {
                            cursor: pointer;
                            user-select: none;

                            &.done {
                                color: #DD4A68;
                            }

                            .iconfont {
                                margin-right: 5px;
                            }

                            &:hover {
                                color: #99a9bf;
                            }

                            .clickTarget {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }

                .post {
                    label {
                        display: block;
                        text-indent: 3px;

                        input,
                        textarea {
                            margin-top: 12px;
                            margin-bottom: 15px;
                            padding: 10px 12px;
                            width: 100%;
                            box-sizing: border-box;
                            border-radius: 5px;
                            border: 0;
                            outline: 1px solid #999;
                            font-size: 16px;
                            font-family: Helvetica,sans-serif;
                            transition: outline-color .3s;
                        }

                        input {
                            display: block;
                        }

                        textarea {
                            height: 150px;
                            resize: none;
                        }

                        input:focus,
                        textarea:focus {
                            outline-color: #666;
                        }
                    }

                    .submit {
                        display: block;
                        position: relative;
                        padding-bottom: 5px;
                        margin-left: 2px;
                        font-size: 18px;
                        color: #666;
                        cursor: pointer;
                        user-select: none;
                        transition: color .3s;

                        &:hover {
                            color: black;
                        }

                        &:hover .bottom {
                            width: 100%;
                            background-color: #666;
                        }

                        .bottom {
                            display: block;
                            position: absolute;
                            bottom: -5px;
                            width: 0;
                            height: 2px;
                            transition: width .5s, background-color .5s;
                        }
                    }
                }
            }
        }
    }
</style>